<template>
  <a-card>
    <ContentHeader />
    <div class="table-action">
      <a-button v-if="auth('add')" @click="addMenu">新增菜单</a-button>
    </div>
    <a-alert
      message="此处管理本后台菜单权限，请谨慎修改"
      type="warning"
      banner
      show-icon
      closable
    />
    <a-table
      rowKey="shops_menu_id"
      :columns="columns"
      :data-source="data"
      :pagination="false"
    >
      <template #is_hide="value">
        <a-tag v-if="!value.record.is_hide" color="success">显示</a-tag>
        <a-tag v-if="value.record.is_hide" color="default">隐藏</a-tag>
      </template>
      <template #allowAuth="value">
        <template v-for="(item, key) in value.record.authList" :key="key">
          <a-popover
            :title="value.record.name + '【' + item.name + '】'"
            trigger="focus"
          >
            <template #content>
              <a v-if="auth('editAuth')" @click="editAuth(item)">编辑</a>
              <a-divider type="vertical" />
              <a v-if="auth('assignAuth')" @click="assign(item)">分配接口</a>
              <a-divider type="vertical" />
              <a v-if="auth('delMenu')" @click="deletes(item)">删除</a>
            </template>
            <a-button class="popover-button" size="small">{{
              item.name
            }}</a-button>
          </a-popover>
        </template>
      </template>
      <template #action="value">
        <a v-if="auth('addAuth')" @click="addAction(value.record)">新增权限</a>
        <a-divider type="vertical" />
        <a v-if="auth('edit')" @click="edit(value.record)">编辑</a>
        <a-divider type="vertical" />
        <a v-if="auth('assignAuth')" @click="assign(value.record)">分配接口</a>
        <a-divider type="vertical" />
        <a v-if="auth('delMenu')" @click="deletes(value.record)">删除</a>
      </template>
    </a-table>
    <addMenuForm @okCallback="okCallback" ref="addMenus" />
    <editMenuForm @okCallback="okCallback" ref="editMenus" />
    <addAuthForm @okCallback="okCallback" ref="addAuths" />
    <editAuthForm @okCallback="okCallback" ref="editAuths" />
    <assignAuthForm @okCallback="okCallback" ref="assignAuths" />
  </a-card>
</template>

<script>
import { defineComponent, createVNode, reactive, toRefs } from "vue";
import { list, delMenu } from "@/api/menu/shops/List";
import { allTree } from "@/api/menu/shops/Api";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { notice,auth } from "@/config";
import addMenuForm from "./list/addMenu";
import editMenuForm from "./list/editMenu";
import editAuthForm from "./list/editAuth";
import addAuthForm from "./list/addAuth";
import assignAuthForm from "./list/assignAuth";
export default defineComponent({
  components: {
    addMenuForm,
    editMenuForm,
    addAuthForm,
    editAuthForm,
    assignAuthForm,
  },
  setup() {
    const columns = [
      {
        key: "shops_menu_id",
        title: "菜单ID",
        dataIndex: "shops_menu_id",
        fixed: true,
      },
      {
        key: "name",
        title: "菜单名称",
        dataIndex: "name",
      },
      {
        key: "path",
        title: "菜单路径",
        dataIndex: "path",
      },
      {
        key: "allowAuth",
        title: "菜单权限",
        dataIndex: "allowAuth",
        slots: {
          customRender: "allowAuth",
        },
      },
      {
        title: "排序",
        dataIndex: "sort",
      },
      {
        key: "is_hide",
        title: "是否隐藏",
        dataIndex: "is_hide",
        slots: {
          customRender: "is_hide",
        },
      },
      {
        key: "action",
        title: "操作",
        slots: {
          customRender: "action",
        },
      },
    ]

    // 定义动态数据
    const state = reactive({
      data: [],
      addMenus: {},
      editMenus: {},
      editAuths:{},
      addAuths:{},
      assignAuths:{},
      apiTree:[],
    })

    // 获取数据
    const getTable = () => {
      list().then((res) => {
        state.data = res.data
      });
    };
    getTable()

    // 获取接口数据
    const getApiList = () => {
      allTree().then((res)=>{
        state.apiTree = res.data
      })
    }
    getApiList()

    // 新增菜单
    const addMenu = () => {
      state.addMenus.show(state.data)
    }
    // 编辑菜单
    const edit = (item) => {
      state.editMenus.show(state.data, item);
    }
    // 新增权限
    const addAction = (item) => {
      state.addAuths.show(item)
    }
    // 编辑权限
    const editAuth = (item) =>{
      state.editAuths.show(item)
    }
    // 分配接口
    const assign = (item) => {
      state.assignAuths.show(state.apiTree,item)
    }

    // 删除菜单
    const deletes = (item) => {
      Modal.confirm({
        title: () =>
          "你真的要删除(名称:" +
          item.name +
          ",ID:" +
          item.shops_menu_id +
          ")这条记录吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "注意：确定删除后不可恢复",
        okText: () => "确定删除",
        okType: "danger",
        cancelText: () => "取消操作",
        onOk() {
          delMenu({ shops_menu_id: item.shops_menu_id }).then((res) => {
            getTable()
            notice(res.status == 200 ? "success" : "error", res.message)
          });
        },
        onCancel() {},
      })
    }

    // 新增成功回调
    const okCallback = () => {
      getTable();
    }

    return {
      ...toRefs(state),
      columns,
      addMenu,
      addAction,
      editAuth,
      edit,
      assign,
      deletes,
      okCallback,
      auth
    };
  },
});
</script>
<style scoped>
.popover-button {
  margin-right: 5px;
  padding: 0 5px;
  font-size: 12px;
}
</style>
